<!--
 * @Description: ------------ fileDescription -----------
 * @Author: snows_l snows_l@163.com
 * @Date: 2024-09-05 22:07:52
 * @LastEditors: snows_l snows_l@163.com
 * @LastEditTime: 2025-01-17 13:08:26
 * @FilePath: \BLOG\src\components\icon\Like.vue
-->
<template>
  <div class="icon icon-like-wrap">
    <div class="animation-wrap" :class="{ 'animation-active': animation }"></div>
    <svg
      t="1725855538354"
      :class="{ 'icon-like-active': animation }"
      class="icon-like"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="6005"
      :height="size"
      :width="size">
      <path d="M512 512m-485.4784 0a485.4784 485.4784 0 1 0 970.9568 0 485.4784 485.4784 0 1 0-970.9568 0Z" fill="#FBA3A3" p-id="6006"></path>
      <path
        d="M708.864 404.48h-99.0208a25.6 25.6 0 0 1-23.6544-34.9184c7.5776-19.5584 12.6976-47.8208 6.2976-86.016-8.8064-52.8384-42.0864-67.6352-65.8944-71.2704a24.9344 24.9344 0 0 0-28.3136 20.48C489.8816 281.6 459.264 400.0256 359.6288 400.0256H289.536a29.184 29.184 0 0 0-29.2864 29.2352V691.2a29.2352 29.2352 0 0 0 29.2352 29.2352h115.8144c25.6 0 106.1376 16.128 221.6448 17.4592s138.24-118.2208 147.7632-213.5552S759.9104 404.48 708.864 404.48z m-302.7456 235.2128a25.6 25.6 0 0 1-51.2 0V478.5152a25.6 25.6 0 1 1 51.2 0z"
        fill="#FFFFFF"
        p-id="6007"></path>
    </svg>
  </div>
</template>

<script lang="ts" setup>
import { watch, ref } from 'vue';
const props = defineProps({
  size: {
    type: [Number, String],
    default: 16
  },
  animation: {
    type: Boolean,
    default: false
  }
});
</script>

<style scoped lang="scss">
.icon-like-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  .animation-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
  }
}
.icon-like-active {
  animation: bubble 1s ease-in-out infinite;
}
.animation-active {
  border-radius: 50%;
  animation: sparkles 1s ease-in-out infinite;
}

@keyframes sparkles {
  0%,
  20% {
    opacity: 0;
  }
  25% {
    opacity: 1;
    border-width: 3px;
    box-shadow: 0.3247595264rem -2.4375rem 0 0rem #ff8080, -0.3247595264rem -2.0625rem 0 0rem #ffed80, 2.1081984913rem -1.26584917rem 0 0rem #ffed80,
      1.4100431801rem -1.5398549383rem 0 0rem #a4ff80, 2.3041209928rem 0.8590119036rem 0 0rem #a4ff80, 2.0830546613rem 0.1423323087rem 0 0rem #80ffc8,
      0.7649933912rem 2.3370194931rem 0 0rem #80ffc8, 1.1874862855rem 1.7173410733rem 0 0rem #80c8ff, -1.3501898369rem 2.0552037379rem 0 0rem #80c8ff,
      -0.6022000541rem 1.99917976rem 0 0rem #a480ff, -2.4486525744rem 0.2257776503rem 0 0rem #a480ff, -1.9368615117rem 0.7760834533rem 0 0rem #ff80ed,
      -1.7032295617rem -1.7736635246rem 0 0rem #ff80ed, -1.7927736947rem -1.0242348366rem 0 0rem #ff8080;
  }
}

@keyframes bubble {
  15% {
    transform: scale(1.2);
    border-color: #cc8ef5;
    border-width: 2.25rem;
  }
  30%,
  100% {
    transform: scale(1.2);
    border-color: #cc8ef5;
    border-width: 0;
  }
}
</style>
